<template>
  <div class="container">
    <div class="header mg-b-60">
      <div class="title fs-36 bold text-center">{{ contentData.title }}</div>
      <div class="sub-title mg-t-24 text-center">
        {{ contentData.subTitle }}
      </div>
    </div>
    <slot>
      <div class="">
        <div
          v-for="(i, index) in contentData.list"
          :key="index"
          class="flex mg-t-24"
        >
          <img
            v-if="contentData.isCheckIcon"
            src="../assets/img/icon-check.png"
            alt=""
            class="icon-check"
            :class="[i.iconType]"
          />
          <img v-else :src="i.icon" alt="" class="icon" :class="[i.iconType]" />
          <div class="mg-l-16">
            <div class="bold fs-28">{{ i.name }}</div>
            <div class="fs-24 mg-t-10 fc-grey">{{ i.content }}</div>
          </div>
        </div>
        <div v-if="contentData.img" class="mg-t-60">
          <img class="img" :src="contentData.img" alt="" />
        </div>
      </div>
    </slot>
  </div>
</template>
<script>
export default {
  props: {
    contentData: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
@import url(../assets/css/main.scss);

.container {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  color: #202536;
}
.sub-title {
  font-size: 24px;
  color: #565868;
}

.icon-check {
  width: 40px;
  height: 40px;
}

.icon {
  width: 64px;
  height: 64px;
}
.img {
  width: 100%;
  height: auto;
}
.fc-grey {
  color: #565868;
}
</style>
